import { Modal, Button, Form, FormItem } from "@arco-design/web-vue";
import type { Ref, VNodeRef } from "vue";
import type {
  Template,
  EditMode,
  ModuleConfig,
  SubmitConfig,
} from "@/views/table/types";
import { componentMap } from "@/views/table/fragment/component-map";

interface DialogProp {
  visible: Ref<boolean>;
  title: string;
  models: Template[];
  formRef: Ref<null> | Ref<VNodeRef>;
  formModel: {
    [k in string]: any;
  };
  baseUrl: string;
  api: string;
  layout?: ModuleConfig["layout"];
  currMode: EditMode;
  emit: any;
  submit: (data: Record<string, any>, config: SubmitConfig) => void;
  beforeSubmit?: (data: Record<string, any>, config: SubmitConfig) => void;
  callback: () => void;
}
export function dialogRender(prop: DialogProp) {
  return (
    <Modal
      v-model:visible={prop.visible.value}
      unmountOnClose
      width="50vw"
      title={prop.title || ""}
      v-slots={{
        footer: () => (
          <div class="flex justify-end">
            <Button
              type="outline"
              style="color: gray;border-color: gray;"
              class="mr-2"
              onClick={() => {
                prop.visible.value = false;
              }}
            >
              取消
            </Button>
            <Button
              type="outline"
              onClick={() => {
                if (prop.formRef) {
                  prop.formRef.value!.validate((errs: any) => {
                    // debounce(callback, 1000, { leading: true });
                    // 异步检验
                    console.log(errs);
                    if (errs) return false;
                    /*
                 检验通过
                  */
                    if (prop.beforeSubmit) {
                      prop.beforeSubmit(prop.formModel, {
                        emit: prop.emit,
                        visible: prop.visible,
                        models: prop.models,
                        currMode: prop.currMode,
                        api: prop.api,
                        baseUrl: prop.baseUrl,
                        callback: prop.callback,
                      });
                    }
                    prop.submit(prop.formModel, {
                      emit: prop.emit,
                      visible: prop.visible,
                      models: prop.models,
                      currMode: prop.currMode,
                      api: prop.api,
                      baseUrl: prop.baseUrl,
                      callback: prop.callback,
                    });
                  });
                }
              }}
            >
              确定
            </Button>
          </div>
        ),
      }}
    >
      <div style="width: 100%;height: 60vh;">
        <Form
          ref={prop.formRef}
          model={prop.formModel}
          layout={prop.layout || "vertical"}
          disabled={prop.currMode === "detail"}
        >
          {prop.models.map((it) => (
            <FormItem
              field={it.field}
              label={it.title}
              key={it.field}
              rules={it.rules || []}
            >
              {it.renderItem && it.renderItem[prop.currMode]
                ? typeof it.renderItem[prop.currMode] === "function"
                  ? it.renderItem[prop.currMode]({
                      state: prop.formModel,
                      key: it.field,
                      placeholder: it.placeholder || "",
                      props: it.props,
                      emit: prop.emit,
                      width: "100%",
                    })
                  : null
                : componentMap[it.type || "input"]({
                    state: prop.formModel,
                    key: it.field,
                    placeholder: it.placeholder || "",
                    props: it.props || {},
                    emit: prop.emit,
                    width: "100%",
                  }) || null}
            </FormItem>
          ))}
        </Form>
      </div>
    </Modal>
  );
}
